import ReactEcharts from "echarts-for-react";
import moment from "moment";
import React, { Component } from "react";
import axios from "axios";
import { Card, Row, Col, Statistic, DatePicker } from "antd";
const { RangePicker } = DatePicker;
import { gameStatistics } from "./service";

// @page 商家
class sevenActivity extends Component {
	state = {
		beginDate: "",
		endDate: "",
		resultData: {},
		firstTime: undefined,
		lastTime: undefined,
	};

	async componentDidMount() {
		this.getData();
	}

	getData = async () => {
		let { beginDate, endDate } = this.state;
		const res = await gameStatistics({
			beginDate,
			endDate,
		});
		this.setState({
			resultData: res.data,
			firstTime: res.data.date[0],
			lastTime: res.data.date[res.data.date.length - 1],
		});

		console.log(res.data.date[0]);
		console.log(res.data.date[res.data.date.length - 1]);
	};
	changeValue = (data: any) => {
		this.setState({ beginDate: data[0], endDate: data[1] });
		this.getData();
	};

	getOption() {
		var option = {
			title: {
				text: "庄园分析",
			},
			tooltip: {
				trigger: "axis",
			},
			legend: {
				data: ["今日领养", "今日签到", "今日任务", "今日喂养", "今日鸡蛋"],
			},
			xAxis: {
				type: "category",
				axisTick: { show: false },
				nameLocation: "middle",
				data: this.state.resultData.date,
			},
			yAxis: {
				// type: "value",
				// minInterval: 1, //最小刻度是1
				// splitNumber: 5, //段数是4
				// min: 0, //最小是0
				// max: function (value: any) {
				// 	console.log("value", value.max); //正常情况下已经可以拿到最大值了，下面的处理是为了使得最大值是整十整百的数字，使得坐标轴美观。
				// 	let n = (value.max + "").split(".")[0].length; // 加""是为了转化为字符串，可以使用split方法，这里是为了拿到max的整数部分
				// 	let pow = Math.pow(10, n - 1); // 10, 100, 1000,..... 这里是为了拿到
				// 	let floorNUm = Math.floor(value.max / pow); //1,2,3,4,5,.....，这里是为了拿到max的最高位数字
				// 	console.log(floorNUm);
				// 	return value.max;
				// },
			},
			series: [
				{
					name: "今日领养",
					type: "line",
					data: this.state.resultData.adopt,
				},
				{
					name: "今日签到",
					type: "line",
					data: this.state.resultData.sign,
				},
				{
					name: "今日任务",
					type: "line",
					data: this.state.resultData.task,
				},
				{
					name: "今日喂养",
					type: "line",
					data: this.state.resultData.eat,
				},
				{
					name: "今日鸡蛋",
					type: "line",
					data: this.state.resultData.egg,
				},
			],
		};
		return option;
	}

	render() {
		return (
			<div className="App">
				<Card>
					<RangePicker
						picker="week"
						format="YYYY-MM-DD"
						value={[
							moment(this.state.firstTime, "YYYY-MM-DD"),
							moment(this.state.lastTime, "YYYY-MM-DD"),
						]}
						disabledDate={(current: any) => {
							return current && current >= moment().endOf("day");
						}}
						onChange={(date: any, dateString: any) => {
							setTimeout(() => {
								this.changeValue(dateString);
							}, 0);
						}}
					/>
				</Card>
				<Card>
					<ReactEcharts
						style={{ height: "600" + "px" }}
						notMerge={true}
						lazyUpdate={true}
						theme={"theme_name"}
						option={this.getOption()}
					/>
				</Card>
			</div>
		);
	}
}

export default sevenActivity;
